<template>
	<view class="page-container">
	  <view class="listItem" @click="openIpPopup()">手动设置服务器地址</view>
	  <view class="listItem" @click="clear()">清除数据</view>
	  <view class="listItem" @click="isServer()">服务器状态</view>
	  
	  <view class="info-section">
	    <view class="info-item">
	      <text class="info-label">版本号</text>
	      <text class="info-value">v1.0.1</text>
	    </view>
	    <view class="info-item">
	      <text class="info-label">联系我们</text>
	      <text class="info-value">2873203948@qq.com</text>
	    </view>
	  </view>
	
	  <uni-popup ref="ipPopup" type="bottom">
	    <view class="popup-content">
	      <text class="popup-title">服务器地址设置</text>
	      <input 
	        class="url-input"
	        placeholder="请输入服务器地址"
	        v-model="url"/>
	      <button 
	        class="confirm-btn"
	        @click="setBaseUrl">确认设置</button>
	      <text class="tip-text">提示：请联系开发人员获取服务器地址</text>
	    </view>
	  </uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
			}
		},
		methods: {
			openIpPopup(){
				console.log("openIpPopup")
				this.$refs.ipPopup.open();
			},
			setBaseUrl(){
				uni.request({
					url:this.url+'/',
					method:'GET',
					success() {
						uni.setStorageSync('baseUrl',this.url);
						uni.showToast({
							title:'设置成功'
						});
					},
					fail() {
						uni.showToast({
							icon:'none',
							title:'设置失败，该服务器地址不可用'
						})
					}
				})
				
				this.$refs.ipPopup.close();
				this.url='';
			},
			clear(){
				uni.clearStorage();
				uni.showToast({
					title:'清除缓存成功'
				});
			},
			isServer(){
				uni.request({
					url:this.baseUrl+'/',
					method:'GET',
					success() {
						uni.setStorageSync('baseUrl',this.url);
						uni.showToast({
							icon:'none',
							title:'当前服务器运行良好，你可以放心使用'
						});
					},
					fail() {
						uni.showToast({
							icon:'none',
							title:'服务器离线，请更改服务器地址或联系我们'
						})
					}
				})
			}
		}
	}
</script>

<style>
/* 通用容器样式 */
.page-container {
  padding: 32rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 列表项增强样式 */
.listItem {
  font-size: 34rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 16rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  color: #2c3e50;
  font-weight: 500;
}

.listItem:active {
  background-color: #f8f9fa;
  transform: translateY(2rpx);
}

/* 信息展示区块 */
.info-section {
  margin-top: 48rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 30rpx;
}

.info-value {
  color: #999;
  font-size: 28rpx;
}

/* 弹出层深度优化 */
.uni-popup {
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
}

.popup-content {
  padding: 48rpx 32rpx;
  background: #ffffff;
  height: 550rpx;
  position: relative;
}

.popup-title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 32rpx;
  font-weight: 600;
}

.url-input {
  width: 90%;
  height: 88rpx;
  padding: 0 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  font-size: 32rpx;
  margin: 48rpx 0;
  transition: border-color 0.3s ease;
}

.url-input:focus {
  border-color: #007aff;
  outline: none;
}

.confirm-btn {
  background: #007aff;
  color: white;
  border-radius: 12rpx;
  padding: 24rpx 48rpx;
  font-size: 34rpx;
  transition: opacity 0.3s ease;
}

.confirm-btn:active {
  opacity: 0.85;
}

/* 遮罩层定制 */
.uni-popup__overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
